<template>
  <!--官网视频播放页 -->
  <div class="main">
    <div class="shipin-page">
      <div class="navbar">
        <Header></Header>
        <div class="shipin-box">
          <el-button type="primary" @click="goback">返回</el-button>
          <div class="title">{{videoInfo.name}}</div>
         <div class="video" v-if="videoInfo.url">
          <video controls autoplay :muted="false" :src="videoInfo.url"></video>
         </div>
        </div>
      </div>
    </div>
  
    <!-- 底部 -->
    <Footer></Footer>
  </div>
</template>
  
  <script>
import Header from '../../../components/ConsignmentFourzero/header.vue'
import Footer from '../../../components/ConsignmentFourzero/footer.vue'
import { listBlack } from "@/api/black/black";
import Lianxiwomen from "@/components/ConsignmentFourzero/lianxiwomen.vue"
import resourcesManage from '@/api/PCWebImages/resourcesManage'
export default {
  components: {
    Header,
    Footer
  },
  data() {
    return {
      loading:false,
      videoInfo:{},
      isSHowType: [
        {
          name: "推荐工具",
          value: 1,
        },
        {
          name: "指导文章",
          value: 2,
        },
        {
          name: "教学视频",
          value: 3,
        },
      ],
    }
  },
  created() {

  },
  watch: { // 监听,当路由发生变化的时候执行
    $route: {
      handler: function (route) {
        if(route.query && route.query.id){
          this.getItem(route.query.id)
        }
      },
      immediate: true,
      deep:true
    }
  },
  methods: {
    goback(){
      window.history.go(-1)
    },
    getItem(id){
      resourcesManage.getDetailweb(id).then(res=>{
        console.log("%c Line:67 🍎 res", "color:#33a5ff", res);
        this.videoInfo = res.data
      })
    },
    clickItem(item){
      if(item.type==1||item.type==3){

      }else{
        if(item.pcJump.indexOf('http')>-1){
          window.open(item.pcJump,'_blank')
        }else{
          this.$router.push({
            path:item.pcJump
          })
        }
      }
    },
    getList(){
      this.loading = true;
      let obj = {
        systemType: 2
      }
      resourcesManage
        .getList(obj)
        .then(res => {
          this.loading = false;
          this.videoList = {}
          this.videoList[1] = []
          this.videoList[2] = []
          this.videoList[3] = []
          if(res.rows&&res.rows.length){
            res.rows.forEach(r=>{
              if(r.type==1&&this.videoList[1].length<4){
                this.videoList[1].push(r)
              }else if(r.type==2&&this.videoList[2].length<4){
                this.videoList[2].push(r)
              }else if(r.type==3&&this.videoList[3].length<4){
                this.videoList[3].push(r)
              }
            })
          }
        })
        .catch(err => {
          this.loading = false;
        });
    },
  }
}
  </script>
  
  <style lang="scss" scoped>
.main {
  width: 100%;
  background-color: #000;

}
.shipin-page {
  .navbar {
    width: 1200px;
    margin: 0 auto;
  }
  .shipin-box{
    color: #fff;
    background: linear-gradient(180deg, #070a20 0%, #6e7796 100%);
    padding: 20px;
    .title{
      font-size: 24px;
      font-weight: bold;
      text-align: center;
      justify-content: space-between;
      align-items: center;
      padding: 15px 0;
    }
    .video{
      width: 1160px;
      height: 652px;
      video{
        width: 100%;
        height: 100%;
        background-color: #000;
      }
    }
  }

}
</style>